/* eslint-disable no-unused-vars */
/* eslint-disable import/no-cycle */
import React, { useEffect, useImperativeHandle, useState, forwardRef } from 'react';
import { Layout, Row, Col } from 'antd';
import ControlPlus from './controls/ControlPlus';
import ToolBarDrap from './common/ToolBarDrap';

const DesignTool = forwardRef((props, ref) => {
  const { parentForm } = props;
  const [iscollapsed, setIscollapsed] = useState(false);

  useImperativeHandle(ref, () => ({}));

  useEffect(() => {}, []);

  const renderTool = function (control) {
    return control.map((type) => {
      const c = ControlPlus.create(type);
      return (
        <Col key={type} span={12}>
          <div
            className={"designControl"}
            {...new ToolBarDrap.DragData(parentForm.tooldrap, { key: null, type }).bindDrapStartEventProps(true)}
          >
            <img alt={c.name} src={c.icon} className={{ width: '20px', height: '20px' }} />
            <span>{c.name}</span>
          </div>
        </Col>
      );
    });
  };

  return (
    <Layout.Sider
      title="左侧工具栏"
      width={200}
      collapsible
      collapsedWidth={0}
      collapsed={iscollapsed}
      trigger={iscollapsed === true ? '>' : '<'}
      zeroWidthTriggerStyle={{ top: `${window.innerHeight / 2}px`, width: 'auto', right: '-12px' }}
      theme="light"
      onCollapse={(collapsed, type) => {
        setIscollapsed(collapsed);
      }}
    >
      <Layout>
        <div className={"designTool"}>
          {(parentForm.toolbar || ControlPlus.getDefaultToolBar()).map((item) => {
            return (
              <div key={item.title}>
                <Row>
                  <Col span={24}>{item.title}</Col>
                </Row>
                <Row>{renderTool(item.control)}</Row>
              </div>
            );
          })}
        </div>
      </Layout>
    </Layout.Sider>
  );
});

export default DesignTool;
